<template>
  <div>
    <el-row class="m-b-10">
      <el-col :span="12">
        <el-input
          size="small"
          clearable
          style="width: 400px"
          v-model="search.sharerName"
          class="m-r-10"
          placeholder="请输入分润方名称"
          @change="query"
        />
      </el-col>
      <el-col :span="12" class="flex-end">
        <el-button
          size="small"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="addNew"
          >新增分润方</el-button
        >
      </el-col>
    </el-row>
    <!--   filling-profit-sharer:add-->

    <!--  table  -->
    <el-table
      v-if="refreshFlag > 0"
      class="my-table"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column label="分润方名称" width="200" align="center">
        <template v-slot="scope">{{
          scope.row.sharerName | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="联系人" min-width="180" align="center">
        <template v-slot="scope">{{
          scope.row.contactName | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="手机号码" min-width="200" align="center">
        <template v-slot="scope">{{ scope.row.phone | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="登录账户" width="140" align="center">
        <template v-slot="scope">{{
          scope.row.userCode | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="登录密码" width="140" align="center">
        <template v-slot="scope">
          <span :title="scope.row.userPwd">{{
            scope.row.userPwd | defaultValue
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="300">
        <template v-slot="scope">
          <auth-wrapper btn-key="filling-profit-sharer:detail">
            <el-button
              @click="editRow(scope.row)"
              type="text"
              size="small"
              icon="el-icon-edit"
              >查看</el-button
            >
          </auth-wrapper>
          <auth-wrapper btn-key="filling-profit-sharer:reset-password">
            <el-button
              @click="resetPwd(scope.row)"
              type="text"
              size="small"
              icon="el-icon-edit"
              >初始化密码
            </el-button>
          </auth-wrapper>
          <auth-wrapper btn-key="filling-profit-sharer:delete">
            <el-button
              @click="deleteRow(scope.row)"
              type="text"
              size="small"
              :loading="removeLoading"
              icon="el-icon-delete"
              >删除
            </el-button>
          </auth-wrapper>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @change="query"
    />
  </div>
</template>

<script>
import {
  confirmWarning,
  getRecords,
  getTotal,
  isNull,
  msgSuccess,
} from "@/util/common-util";
import AppPagination from "@/components/business/app-pagination";
import AppDictSelect from "@/components/business/app-dict-select";
import { getList } from "@/api/profit-sharer/profit-sharer";

import DictValueDisplay from "@/components/business/dict-value-display";
import AuthWrapper from "@/components/business/auth-wrapper";

export default {
  name: "filling-profit-sharer-list",
  computed: {},
  components: { AuthWrapper, DictValueDisplay, AppDictSelect, AppPagination },
  data() {
    return {
      showSearchFlag: true,
      refreshFlag: false,
      data: [],
      loading: false,
      removeLoading: false,
      resetPwdLoading: false,
      search: {
        roleType: "",
        sharerName: "",
      },
      total: 0,
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    refresh() {
      this.refreshFlag = 0;
      this.$nextTick(() => {
        this.refreshFlag = 1;
      });
    },
    roleChange(_type) {
      this.search.roleType = _type;
      this.query();
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      } else {
        _page = {
          current: 1,
          size: 10,
        };
      }
      console.log(_page);
      getList(_page.current, _page.size, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
          this.refresh();
        })
        .then(() => {
          this.loading = false;
        });
    },
    addNew() {
      this.$emit("add");
    },
    editRow(_row) {
      this.$emit("detail", _row);
    },
    resetPwd(_row) {
      confirmWarning(
        "初始化密码",
        `确定初始化分润方 ${_row.sharerName} 密码？`,
        () => {
          this.resetPwdLoading = true;
          resetPwd(_row.id)
            .then((res) => {
              this.resetPwdLoading = false;
              msgSuccess();
              this.query();
            })
            .catch(() => {
              this.resetPwdLoading = false;
            });
        }
      );
    },
    deleteRow(row) {
      confirmWarning("分润方", `确定删除分润方 ${row.sharerName} ？`, () => {
        this.removeLoading = true;
        remove(row.id)
          .then((res) => {
            this.removeLoading = false;
            msgSuccess();
            this.query();
          })
          .catch(() => {
            this.removeLoading = false;
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  height: calc(100vh - 320px);
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
